<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:active</title>
		<style>
			/* 统一设置内阴影 */
			[href]:active,
			button:active {
				/* 对非闭合标签无效（input）,兼容到IE9 */
				box-shadow: inset 0 0 0 999px rgba(0,0,0,.5);
			}
			/* 或者用渐变，但需要IE10以上 */
			[type=button]:active{
				background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
			}
			img {
				width: 100px;
				height: 100px;
			}
			[href] > img:only-child:active {
				outline: 999px solid rgba(0,0,0,.5);
				outline-offset: -999px;
				-webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
				clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
			}
		</style>
	</head>
	<body>
		<h4>ie中给body/html设置:active,背景色不能还原</h4>
		<h4>safari中，:active默认是无效的，需要设置任意touch事件。或者使用-webkit-tap-highlight-color</h4>
		<h4>键盘访问无法触发active，事实上他就是为点击而生的</h4>
		<button>测试一下预设内阴影(颜色这么离谱，是为了避免浏览器默认的影响)</button>
		<input type="button" value="测试一下非闭合的内阴影">
		<h4>特殊情况包裹图片，active样式被图片遮挡</h4>
		<a href=""> <img src="../../Source/pic.jpg" /> </a>
	</body>
</html>
